<template>
	<view class="rank_detail">
		<view class="top" :style="'background:'+ bgColor">
			<view class="nav_bar">
				<view class="nav_bar_left">
					<view style="font-size:50rpx;" @click="linkBack">＜</view>
					<!-- <view style="font-size:28rpx;" v-if="detailData.closed">休市中</view> -->
					<!-- <view style="font-size:28rpx;" v-else>已开市</view> -->
				</view>
				<view class="nav_bar_center">
					<view>◀</view>
					<view class="rank_title">
						<view style="display:flex;align-items:center;">
							<text class="flag" v-if="detailData.master">主</text>
							<!--  product_short_name-->
							<text class="name">{{detailData.name}}{{detailData.futuresDate}}</text>
						</view>
						<view>
							<text style="font-size:24rpx;color:#aaa" v-if="detailData.exchange_id==='CFFEX'">中金所</text>
							<text style="font-size:24rpx;color:#FFFFFF;margin-left:5rpx;">{{detailData.instrument_id}}</text>
						</view>
					</view>
					<view style="margin-left:20rpx;">▶</view>
				</view>
				<view class="nav_bar_right">
					<view>图标</view>
					<view style="margin-left:10rpx;">图标</view>
					<view style="margin-left:10rpx;">图标</view>
				</view>
			</view>
			<view class="introduce" @click="showPop = !showPop">
				<view class="intro_left">
					<view class="price">{{detailData.last_price}}</view>
					<view class="ratio">
						<text>{{detailData.dataNumber}}</text>
						<text style="margin-left:20rpx;" v-if="detailData.hlFlag==='1'">{{'+'+detailData.hl+'%'}}</text>
						<text style="margin-left:20rpx;" v-else-if="detailData.hlFlag==='0'">{{detailData.hl+'%'}}</text>
					</view>
					<view class="pay_time">
						<text class="tt">最近交易</text>
						<text class="arrow"></text>
						<view style="color:#fff;">23:00:00</view>
					</view>
				</view>
				<view class="intro_right">
					<view class='item'>
						<view class='title'>卖价</view>
						<view class='price'>{{detailData.ask_price1}}</view>
					</view>
					<view class='item'>
						<view class='title'>卖量</view>
						<view class='price'>{{detailData.ask_volume1}}</view>
					</view>
					<view class='item' style="margin-top:10rpx;">
						<view class='title'>买价</view>
						<view class='price'>{{detailData.bid_price1}}</view>
					</view>
					<view class='item' style="margin-top:10rpx;">
						<view class='title'>买量</view>
						<view class='price'>{{detailData.bid_volume1}}</view>
					</view>
				</view>
			</view>
			<view class="arrow_down" @click="showPop = !showPop">
				<image v-if="!showPop" src="../../../static/icons/arrow_down.png" mode="aspectFill" style="width:24rpx;height:18rpx;"></image>
				<image v-else src="../../../static/icons/arrow_up.png" mode="aspectFill" style="width:24rpx;height:18rpx;"></image>
			</view>
		</view>
		<view class="bottom">
			<view class="time_step">
				<u-tabs ref="tabs" :list="list" active-color="#3e8ef7" inactive-color="#9a9a9a" font-size="24" :current="current"
				 @change="change">				 
				</u-tabs>
			</view>
			<view class="chart_position">						
				<!-- 分时 -->
				<view class="charts_content" :style="{'left':left}">
					<view class="titleClass">均价:2593 价位:2592 -7 -0.23%</view>
					<view class="wrap_view">
						<view class="wrap_left">
							<view class="wrap_top">
								<view class="qiun-Areacharts">
									<view
									 id="k-line-chart"
									 class="content">
									</view>									
								</view>
							</view>
							<view class="wrap_bottom"></view>
					</view>
					<view class="wrap-right">
							<view class="detail_class">
								<view class="detail_flex">成交明细</view>
								<!-- v-else-if="active===0"  @click="changeActive(0)" :class="[active===0 ? 'active' : '']"<view class="detail_flex" @click="changeActive(1)" :class="[active===1 ? 'active' : '']">五档</view> -->
							</view>
							<!-- <scroll-view class="scroll-view_H" scroll-y="true" scroll-left="120" v-if="active===1">
								<view class="sp-r">
									<view class="sp-grid">
										卖5
									</view>
									<view class="sp-grid point_data">
										{{detailData.ask_price5}}
									</view>
									<view class="sp-grid">
										{{detailData.ask_volume5}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										卖4
									</view>
									<view class="sp-grid point_data">
										{{detailData.ask_price4}}
									</view>
									<view class="sp-grid">
										{{detailData.ask_volume4}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										卖3
									</view>
									<view class="sp-grid point_data">
										{{detailData.ask_price3}}
									</view>
									<view class="sp-grid">
										{{detailData.ask_volume3}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										卖2
									</view>
									<view class="sp-grid point_data">
										{{detailData.ask_price2}}
									</view>
									<view class="sp-grid">
										{{detailData.ask_volume2}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										卖1
									</view>
									<view class="sp-grid point_data">
										{{detailData.ask_price1}}
									</view>
									<view class="sp-grid">
										{{detailData.ask_volume1}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										买1
									</view>
									<view class="sp-grid point_data">
										{{detailData.bid_price1}}
									</view>
									<view class="sp-grid">
										{{detailData.bid_volume1}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										买2
									</view>
									<view class="sp-grid point_data">
										{{detailData.bid_price2}}
									</view>
									<view class="sp-grid">
										{{detailData.bid_volume2}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										买3
									</view>
									<view class="sp-grid point_data">
										{{detailData.bid_price3}}
									</view>
									<view class="sp-grid">
										{{detailData.bid_volume3}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										买4
									</view>
									<view class="sp-grid point_data">
										{{detailData.bid_price4}}
									</view>
									<view class="sp-grid">
										{{detailData.bid_volume4}}
									</view>
								</view>
								<view class="sp-r">
									<view class="sp-grid">
										买5
									</view>
									<view class="sp-grid point_data">
										{{detailData.bid_price5}}
									</view>
									<view class="sp-grid">
										{{detailData.bid_volume5}}
									</view>
								</view>
							</scroll-view> -->
							<scroll-view class="scroll-view_H" scroll-y="true" scroll-left="120">
								<view class="sp-r" v-for="(item,index) in detailData.tick" :key="index">
									<view class="sp-grid">
										{{item.datetime}}
									</view>
									<view class="sp-grid point_data">
										{{item.last_price}}
									</view>
									<view class="sp-grid">
										{{item.volume}}
									</view>
								</view>
							</scroll-view>
					</view>
					</view>
				</view>
				<!-- 日k v-show="current===1"-->
				<view class="charts_content1" :style="{'left':left1}">
					<view id="technical-indicator-k-line" class="k-line-chart1"></view>			
						<view class="k-line-chart-menu-container">
							<text>主图指标</text>
							<button v-for="type in mainTechnicalIndicatorTypes" :key="type" @click="setCandleTechnicalIndicator(type)">
								{{type}}
							</button>							
							<text>副图指标</text>
							<button v-for="type in subTechnicalIndicatorTypes" :key="type" @click="setSubTechnicalIndicator(type)">
								{{type}}
							</button>							
						</view>
				</view>
					<!-- <view class="titleClass">MA:MA1(5):6185 MA:MA1(10):6185 MA:MA1(20):6185 MA:MA1(30):6185 MA:MA1(60):6185</view> -->
				<!-- </view> -->
				<!-- 60分 -->
				<view class="charts_content2" :style="{'left':left2}">
					<view id="technical-indicator-k-sixline" class="k-line-chart1"></view>			
						<view class="k-line-chart-menu-container">
							<text>主图指标</text>
							<button v-for="type in mainTechnicalIndicatorTypes" :key="type" @click="sixsetCandleTechnicalIndicator(type)">
								{{type}}
							</button>
							
							<text>副图指标</text>
							<button v-for="type in subTechnicalIndicatorTypes" :key="type" @click="sixsetSubTechnicalIndicator(type)">
								{{type}}
							</button>
							
						</view>
				</view>
				<!-- 30分 -->
				<view class="charts_content3" :style="{'left':left3}">
					<view id="technical-indicator-k-threeline" class="k-line-chart1"></view>			
					<view class="k-line-chart-menu-container">
							<text>主图指标</text>
							<button v-for="type in mainTechnicalIndicatorTypes" :key="type" @click="theCandleTechnicalIndicator(type)">
								{{type}}
							</button>
							<text>副图指标</text>
							<button v-for="type in subTechnicalIndicatorTypes" :key="type" @click="theSubTechnicalIndicator(type)">
							{{type}}
						</button>
					</view>
				</view>
				<!-- 15分 -->
				<view class="charts_content4" :style="{'left':left4}">
					<view id="technical-indicator-k-fiveline" class="k-line-chart1"></view>			
					<view class="k-line-chart-menu-container">
							<text>主图指标</text>
							<button v-for="type in mainTechnicalIndicatorTypes" :key="type" @click="fiveCandleTechnicalIndicator(type)">
								{{type}}
							</button>
							<text>副图指标</text>
							<button v-for="type in subTechnicalIndicatorTypes" :key="type" @click="fiveSubTechnicalIndicator(type)">
							{{type}}
						</button>
					</view>
				</view>
				<!-- 1分 -->
				<view class="charts_content5" :style="{'left':left5}">
					<view id="technical-indicator-k-oneline" class="k-line-chart1"></view>			
					<view class="k-line-chart-menu-container">
							<text>主图指标</text>
							<button v-for="type in mainTechnicalIndicatorTypes" :key="type" @click="oneCandleTechnicalIndicator(type)">
								{{type}}
							</button>
							<text>副图指标</text>
							<button v-for="type in subTechnicalIndicatorTypes" :key="type" @click="oneSubTechnicalIndicator(type)">
								{{type}}
							</button>
					</view>
				</view>
			</view>		
				<view class="pop" v-if="showPop" @click="showPop=false">
					<view @click.stop="null">
						<view class="info_tt">
							<view class="info_item">开盘</view>
							<view class="info_item">最高</view>
							<view class="info_item">持仓量</view>
							<view class="info_item">昨结</view>
							<view class="info_item">涨停</view>
						</view>
						<view class="info_tt deep">
							<view class="info_item up">{{detailData.open}}</view>
							<view class="info_item up">{{detailData.highest}}</view>
							<view class="info_item">{{detailData.open_interest}}</view>
							<view class="info_item">{{detailData.pre_settlement}}</view>
							<view class="info_item up">{{detailData.upper_limit}}</view>
						</view>
						<view class="info_tt">
							<view class="info_item">成交量</view>
							<view class="info_item">最低</view>
							<view class="info_item">日增量</view>
							<view class="info_item">昨收</view>
							<view class="info_item">跌停</view>
						</view>
						<view class="info_tt deep">
							<view class="info_item">{{detailData.volume}}</view>
							<view class="info_item down">{{detailData.lowest}}</view>
							<view class="info_item">{{detailData.upper_limit}}</view>
							<view class="info_item">{{detailData.pre_close}}</view>
							<view class="info_item down">{{detailData.lower_limit}}</view>
						</view>
					</view>
			</view>
			</view>
		<view class="flexd_cont">
			<button type="default" @click="overFn">+自选</button>
		</view>
		</view>
		
	</view>
</template>

<script>
	// import uCharts from '@/components/u-charts/u-charts.js';
	import {isJSON} from '@/common/checker.js';
	var _self;
	var canvaCandle = null;
	var canvaArea = null;
	export default {
		data() {
			return {
				left:'0px',
				left1:'375px',
				left2:'375px',
				left3:'375px',
				left4:'375px',
				left5:'375px',
				mainTechnicalIndicatorTypes: ['MA', 'EMA', 'SAR'],
				subTechnicalIndicatorTypes: ['VOL', 'MACD', 'KDJ'],
				instrumentId:'',
				time:60,
				Kdata:'',
				detailData: null,
				active: 0,
				list: [{
						name: '分时'
					}, {
						name: '日k'
					}, {
						name: '60分'
					},
					{
						name: '30分'
					}, {
						name: '15分'
					}, 
					{
						name: '1分'
					}
				],
				current: 0,
				kLine: '分时',
				showPop: false,
				bgColor: '#03B016', //0 跌  1 涨  2平
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				itemCount: 20, //x轴单屏数据密度
				sliderMax: 50,
				textarea: '',
				listData: [{
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
					}, {
					time: "14:59",
					num: 1716,
					site: 5
				}, ] //成交明细数据
			};
		},
		onLoad() {
			// this.instrumentId=query.id
			// let detailData = JSON.parse(decodeURIComponent(query.item));
			// let num = (detailData.last_price - detailData.pre_settlement).toFixed(2)
			// detailData.dataNumber = num > 0 ? '+' + num : num,
			// detailData.closed=true
			// let datetime=detailData.datetime
			// let nowtime=new Date().getHours()+new Date().getMinutes()/60
			// if(nowtime>=9&&nowtime<=11.5||nowtime>=13.5&&nowtime<=15||nowtime>=21&&nowtime<=23){
			// 	detailData.closed=false
			// }else{
			// 	detailData.closed=true
			// }
			// this.detailData = detailData
			// // this.getWebsocketMsg()
			// // this.setconnectSocket()
			// // this.wsetconnectSocket()
			// if (query.bg && Number(query.bg) === 1) {
			// 	this.bgColor = '#CB1D14'
			// }
			// _self = this;
			// //#ifdef MP-ALIPAY
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		if (res.pixelRatio > 1) {
			// 			//正常这里给2就行，如果pixelRatio=3性能会降低一点
			// 			//_self.pixelRatio =res.pixelRatio;
			// 			_self.pixelRatio = 2;
			// 		}
			// 	}
			// });
			// //#endif
			// this.cWidth = uni.upx2px(750);
			// this.cHeight = uni.upx2px(500);
		},
		mounted() {			
			// this.getServerData();
			// this.getServerData1();
			// this.wsetconnectSocket()
		},
		onShow() {
			// this.onclose()
		},
		onHide() {
			// this.onclose()
		},
		methods: {
			//时分
			// setCandleTechnicalIndicator: function(type) {
			// 	this.$kline.setTechnicalIndicatorType(type)
			// },
			// setSubTechnicalIndicator: function(type) {
			// 	this.$kline.setTechnicalIndicatorType(type, false, this.paneTag)
			// },
			// // 60分
			// sixsetCandleTechnicalIndicator: function(type) {
			// 	this.sixkLineChart.setTechnicalIndicatorType(type)
			// },
			// sixsetSubTechnicalIndicator: function(type) {
			// 	this.sixkLineChart.setTechnicalIndicatorType(type, false, this.sixpaneTag)
			// },
			// //30分
			// theCandleTechnicalIndicator: function(type) {
			// 	this.thekLineChart.setTechnicalIndicatorType(type)
			// },
			// theSubTechnicalIndicator: function(type) {
			// 	this.thekLineChart.setTechnicalIndicatorType(type, false, this.thepaneTag)
			// },
			// //15分
			// fiveCandleTechnicalIndicator: function(type) {
			// 	this.fivekLineChart.setTechnicalIndicatorType(type)
			// },
			// fiveSubTechnicalIndicator: function(type) {
			// 	this.fivekLineChart.setTechnicalIndicatorType(type, false, this.fivepaneTag)
			// },
			// // 1分
			// oneCandleTechnicalIndicator: function(type) {
			// 	this.onekLineChart.setTechnicalIndicatorType(type)
			// },
			// oneSubTechnicalIndicator: function(type) {
			// 	this.onekLineChart.setTechnicalIndicatorType(type, false, this.onepaneTag)
			// },
			wsetconnectSocket(){
				getApp().globalData.connectSocket= uni.connectSocket({
					// 47.102.157.67  192.168.43.133 this.instrumentId CFFEX.IH2106  INE.sc2209 
				    url: 'ws://47.102.157.67:9652/ws/kline?symbol=CFFEX.IH2106&duration=1&id=12', //接口地址。
				    success: (res)=> {
						// res
					}
				});			
				uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接已打开！');
				  
				});
				uni.onSocketError(function (res) {
				  console.log('WebSocket连接打开失败，请检查！');
				});								
				this.getWebsocketMsg()
			},
			getWebsocketMsg(){				
				getApp().globalData.connectSocket.onOpen((res)=>{
					getApp().globalData.connectSocket.onMessage((req)=>{
						let arr=JSON.parse(req.data)
						// let num=arr.length
						this.$kline.applyNewData(arr)
						// for(let i=0;i<num;i++){
						//  this.Kdata.push(arr[i]);
						// }
						 // let Candle={categories:[],series:[]};
						 // //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						 // Candle.categories=;
						 // Candle.series=;
						 // _self.showCandle("canvasCandle",Candle);
						 
					})
				})
			},
			linkBack() {
				uni.navigateBack()
			},
			overFn(){
				
			},
			change(e) {
				this.current = e
				this.kLine = this.list[e].name
				if(e==0){
					this.time=5
					// this.left1=0
					this.left=0
					this.left1='375px'
					this.left2='375px'
					this.left3='375px'
					this.left4='375px'
					this.left5='375px'
			
				}else if(e==1){
					this.left='375px'
					this.left2='375px'
					this.left3='375px'
					this.left4='375px'
					this.left5='375px'
					this.left1=0
					this.time=60*60*24
				}else if(e==2){
					this.left='375px'
					this.left2=0
					this.left3='375px'
					this.left4='375px'
					this.left5='375px'
					this.left1='375px'
					this.time=60*60
				}else if(e==3){
					this.left='375px'
					this.left2='375px'
					this.left3=0
					this.left4='375px'
					this.left5='375px'
					this.left1='375px'
					this.time=60*30
				}else if(e==4){
					this.left='375px'
					this.left2='375px'
					this.left3='375px'
					this.left4=0
					this.left5='375px'
					this.left1='375px'
					this.time=60*15
				}else{
					this.left='375px'
					this.left2='375px'
					this.left3='375px'
					this.left4='375px'
					this.left5=0
					this.left1='375px'
					this.time=60
				}
			},
			onclose(){
				getApp().globalData.connectSocket.close({
					success:(res=>{
						// res
					})
					
				})
			},
			
			changeActive(index) {
				this.active = index
			},
			getServerData1() {
				let Area = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Area.categories = ["2012", "2013", "2014", "2015", "2016"];
				Area.series = [{
					name: '成交量',
					data: [100, 80, 95, 150, 112]
				}]
				_self.showArea("canvasArea", Area);
			},
			
			
		}
	}
</script>
<script module="klinecharts" lang="renderjs">
	import {isJSON} from '@/common/checker.js';
	import Vue from 'vue'
	import { init , dispose } from 'klinecharts'
	import generatedKLineDataList from './generatedKLineDataList.js'
	function basicOptions (theme) {
		const textColor = '#76808F'
		const gridColor = '#ededed'
		const axisLineColor = '#DDDDDD'
		const crossLineColor='#DDDDDD'
		const crossTextBackgroundColor = '#686d76'
	  return {
	    grid: {
	      horizontal: {
	        color: gridColor
	      },
	      vertical: {
	        color: gridColor
	      }
	    },
	    candle: {
		  type:'area',//类型
		  area: {
		        lineSize: 2,
		        lineColor: '#2196F3',
		        value: 'close',
		        fillColor: [{
		          offset: 0,
		          color: 'rgba(33, 150, 243, 0.01)'
		        }, {
		          offset: 1,
		          color: 'rgba(33, 150, 243, 0.2)'
		        }]
		      },
	      priceMark: {
	        high: {
	          color: textColor
	        },
	        low: {
	          color: textColor
	        }
	      },
	      tooltip: {
	        text: {
	          color: textColor
	        }
	      }
	    },
	    technicalIndicator: {
	      tooltip: {
	        text: {
	          color: textColor
	        }
	      }
	    },
	    xAxis: {
	      axisLine: {
	        color: axisLineColor
	      },
	      tickLine: {
	        color: axisLineColor
	      },
	      tickText: {
	        color: textColor
	      }
	    },
	    yAxis: {
	      axisLine: {
	        color: axisLineColor
	      },
	      tickLine: {
	        color: axisLineColor
	      },
	      tickText: {
	        color: textColor
	      }
	    },
	    separator: {
	      color: axisLineColor
	    },
	    crosshair: {
	      horizontal: {
	        line: {
	          color: crossLineColor
	        },
	        text: {
	          backgroundColor: crossTextBackgroundColor
	        }
	      },
	      vertical: {
	        line: {
	          color: crossLineColor
	        },
	        text: {
	          backgroundColor: crossTextBackgroundColor
	        }
	      }
	    }
	  }
	}
	function getThemeOptions (theme) {
		const textColor = '#76808F'
		const gridColor = '#ededed'
		const axisLineColor = '#DDDDDD'
		const crossLineColor='#DDDDDD'
		const crossTextBackgroundColor = '#686d76'
	  return {
	    grid: {
	      horizontal: {
	        color: gridColor
	      },
	      vertical: {
	        color: gridColor
	      }
	    },
	    candle: {
		  type:'candle_down_stroke',
	      priceMark: {
	        high: {
	          color: textColor
	        },
	        low: {
	          color: textColor
	        }
	      },
	      tooltip: {
	        text: {
	          color: textColor
	        }
	      }
	    },
	    technicalIndicator: {
	      tooltip: {
	        text: {
	          color: textColor
	        }
	      }
	    },
	    xAxis: {
	      axisLine: {
	        color: axisLineColor
	      },
	      tickLine: {
	        color: axisLineColor
	      },
	      tickText: {
	        color: textColor
	      }
	    },
	    yAxis: {
		  inside: true,
		  width:30,
		  position:'left',
	      axisLine: {
	        color: axisLineColor
	      },
	      tickLine: {
	        color: axisLineColor
	      },
	      tickText: {
	        color: textColor
	      }
	    },
	    separator: {
	      color: axisLineColor
	    },
	    crosshair: {
	      horizontal: {
	        line: {
	          color: crossLineColor
	        },
	        text: {
	          backgroundColor: crossTextBackgroundColor
	        }
	      },
	      vertical: {
	        line: {
	          color: crossLineColor
	        },
	        text: {
	          backgroundColor: crossTextBackgroundColor
	        }
	      }
	    }
	  }
	}
	const emojiTechnicalIndicator = {
		name: 'EMOJI',
		plots: [{
			key: 'emoji'
		}],
		calcTechnicalIndicator: (kLineDataList) => {
			const result = []
			kLineDataList.forEach(kLineData => {
				result.push({
					emoji: kLineData.close,
					text: fruits[Math.floor(Math.random() * 17)]
				})
			})
			return result
		},
		render: (ctx,{from,to,technicalIndicatorDataList}, {barSpace},options, xAxis, yAxis) => {
			ctx.font = `${barSpace}px Helvetica Neue`
			ctx.textAlign = 'center'
			for (let i = from; i < to; i++) {
				const data = technicalIndicatorDataList[i]
				const x = xAxis.convertToPixel(i)
				const y = yAxis.convertToPixel(data.emoji)
				ctx.fillText(data.text, x, y)
			}
		}
	}

	export default {
		data(){
			return{
				Kdata:[123],
				kLineChart:'',
				instrumentId:'',
				bgColor: '#03B016', //0 跌  1 涨  2平
				detailData:'',
				// time:60
			}
		},
		onLoad(query){
			this.instrumentId=query.id
			let detailData = JSON.parse(decodeURIComponent(query.item));
			let num = (detailData.last_price - detailData.pre_settlement).toFixed(2)
			detailData.dataNumber = num > 0 ? '+' + num : num,
			detailData.closed=true
			let datetime=detailData.datetime
			let nowtime=new Date().getHours()+new Date().getMinutes()/60
			if(nowtime>=9&&nowtime<=11.5||nowtime>=13.5&&nowtime<=15||nowtime>=21&&nowtime<=23){
				detailData.closed=false
			}else{
				detailData.closed=true
			}
			this.detailData = detailData
			// this.getWebsocketMsg()
			// this.setconnectSocket()
			// this.wsetconnectSocket()
			if (query.bg && Number(query.bg) === 1) {
				this.bgColor = '#CB1D14'
			}
		},
		onShow(){},
		onHide(){
			// dispose('technical-indicator-k-line')
			// dispose('k-line-chart')
		},
		mounted: function () {
			 var that=[]
				// this.kLineChart = init('technical-indicator-k-line')//初始化
				// this.kLineChart.setStyleOptions(getThemeOptions())
				// this.kLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
				// this.paneTag = this.kLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})	
			           if ("WebSocket" in window) {
			               // alert("您的浏览器支持 WebSocket!");			               
			               // 打开一个 web socket192.168.43.133  47.102.157.67						  
			               var ws = new WebSocket('ws://192.168.43.133:9652/ws/kline?symbol='+this.instrumentId+'&duration='+this.time+'&id=12');			                
			               ws.onopen = function() {
							   // ws.onopen(()=>{					   
			                  // Web Socket 已连接上，使用 send() 方法发送数据
			                  // ws.send("发送数据");					  
			               };
							  // let kdata=[]
						   // })
			               ws.onmessage = function (evt){ 		
							  let data=JSON.parse(evt.data)
							  // data.push(...data)
							  let num =data.length
							  for(let i=0;i<num;i++){
								 that.push(data[i])
							  }						 
							  // this.kLineChart.applyNewData(that)// 为图表添加数据
							  // const kLineData = () => {//实时更新
							  //   setTimeout(() => {						      
							  //     this.kLineChart.updateData(that)
							  //     kLineData(this.kLineChart)
							  //   }, 1000)
							  // }
							  // kLineData()
			                  // alert("数据已接收...");
							  // })
			               };			                
			               ws.onclose = function()
			               { 
			                  // 关闭 websocket
			                  alert("连接已关闭..."); 
			               }
			            }else{
			               // 浏览器不支持 WebSocket
			               alert("您的浏览器不支持 WebSocket!");
			            }
			         // }
			
			
			// this.setconnectSocket()
			//分时图
		    this.chart = init('k-line-chart')
			this.chart.setStyleOptions({
				grid: {
				  horizontal: {
				    color: '#ededed'
				  },
				  vertical: {
				    color:'#76808F'
				  }
				},
				candle: {
					type:'area',
					area: {
					      lineSize: 2,
					      lineColor: '#2196F3',
					      // value: 'close',
					      fillColor: [{
					        offset: 0,
					        color: 'rgba(33, 150, 243, 0.01)'
					      }, {
					        offset: 1,
					        color: 'rgba(33, 150, 243, 0.2)'
					      }]
					},
					priceMark: {
					  high: {
					    color: '#76808F'
					  },
					  low: {
					    color: '#76808F'
					  }
					},
					tooltip: {
						text:'#76808F'
						// labels: ['开', '收', '高', '低'],
						// values: function (kLineData) {
						// 	return [
						// 		kLineData.open.toFixed(2),
						// 		kLineData.close.toFixed(2),
						// 		kLineData.high.toFixed(2),
						// 		kLineData.low.toFixed(2),
						// 	]
						// }
					}
				},
				technicalIndicator: {
					// tooltip: {
					// 	showName: false,
					// 	showParams: false,			
					// },
					tooltip: {
					  showRule: 'always',
					  showName: true,
					  showParams: true,
					  text: {
					    size: 10,
					    family: 'Helvetica Neue',
					    weight: 'normal',
					    color: '#D9D9D9',
					    marginTop: 6,
					    marginRight: 8,
					    marginBottom: 0,
					    marginLeft: 8
					  }
					}
				},
				
				xAxis: {
				    show: true,
				    height: null,
				    axisLine: {
				      show: false,
				      color: '#888888',
				      size: 1
				    },
				    tickText: {
				      show: true,
				      color: '#D9D9D9',
				      family: 'Helvetica Neue',
				      weight: 'normal',
				      size: 12,
				      paddingTop: 3,
				      paddingBottom: 6
				    },
				    tickLine: {//幅图时间
				      show: true,
				      size: 1,
				      length: 3,
				      color: '#888888'
				    }
				  },
				yAxis: {
					inside: true,
					width:30,
					position:'left',
					axisLine: {
						show: false
					}
				},
				crosshair: {
				  horizontal: {
				    line: {
				      color: '#DDDDDD'
				    },
				    text: {
				      backgroundColor: '#686d76'
				    }
				  },
				  vertical: {
				    line: {
				      color: '#DDDDDD'
				    },
				    text: {
				      backgroundColor: '#686d76'
				    }
				  }
				}
			})
			// this.chart.setScrollEnabled('close')
			// 设置是否缩放
			// setZoomEnabled(enabled)			
			// 是否可以缩放
			// isZoomEnabled()
			this.chart.isZoomEnabled(false)
			// 设置是否可以拖拽滚动
			this.chart.setScrollEnabled('enabled')	
			// 是否可以拖拽滚动
			this.chart.isScrollEnabled()
			this.chart.createPane('technicalIndicator', { technicalIndicatorType: 'VOL', height: 100, dragEnabled: false })
			this.chart.applyNewData(generatedKLineDataList())
			//日K
			
			this.kLineChart = init('technical-indicator-k-line')//初始化
			this.kLineChart.setStyleOptions(getThemeOptions())
			this.kLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
			this.paneTag = this.kLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})
			const kLineData = () => {//实时更新
			  setTimeout(() => {
			    const kLineList = this.kLineChart.getDataList()
			    const lastkLine = kLineList[kLineList.length - 1]
			    const newkLine = generatedKLineDataList(lastkLine.timestamp, lastkLine.close, 1)[0]
			    newkLine.timestamp += 60 * 1000
			    this.kLineChart.updateData(newkLine)
			    kLineData(this.kLineChart)
			  }, 1000)			
			}
			this.kLineChart.applyNewData(this.Kdata)// 为图表添加数据			
			kLineData()
			//60分
			this.sixkLineChart = init('technical-indicator-k-sixline')//初始化
			this.sixkLineChart.setStyleOptions(getThemeOptions())
			this.sixkLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
			this.sixpaneTag = this.sixkLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})
			const sixData = () => {//实时更新
			  setTimeout(() => {
			    const sixList = this.sixkLineChart.getDataList()
			    const lastsix = sixList[sixList.length - 1]
			    const newsix = generatedKLineDataList(lastsix.timestamp, lastsix.close, 1)[0]
			    newsix.timestamp += 60 * 1000
			    this.sixkLineChart.updateData(newsix)
			    sixData(this.sixkLineChart)
			  }, 10000)			
			}
			this.sixkLineChart.applyNewData(generatedKLineDataList())// 为图表添加数据			
			sixData()
			//30分
			this.thekLineChart = init('technical-indicator-k-threeline')//初始化
			this.thekLineChart.setStyleOptions(getThemeOptions())
			this.thekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
			this.thepaneTag = this.thekLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})
			const theData = () => {//实时更新
			  setTimeout(() => {
			    const theList = this.thekLineChart.getDataList()
			    const lastthe = theList[theList.length - 1]
			    const newthe = generatedKLineDataList(lastthe.timestamp, lastthe.close, 1)[0]
			    newthe.timestamp += 60 * 1000
			    this.thekLineChart.updateData(newthe)
			    theData(this.thekLineChart)
			  }, 10000)			
			}
			this.thekLineChart.applyNewData(generatedKLineDataList())// 为图表添加数据			
			theData()
			//15分
			this.fivekLineChart = init('technical-indicator-k-fiveline')//初始化
			this.fivekLineChart.setStyleOptions(getThemeOptions())
			this.fivekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
			this.fivepaneTag = this.fivekLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})
			this.fivekLineChart.applyNewData(generatedKLineDataList())// 为图表添加数据		
			// 1分
			this.onekLineChart = init('technical-indicator-k-oneline')//初始化
			this.onekLineChart.setStyleOptions(getThemeOptions())
			this.onekLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator)//自定义技术指标
			this.onepaneTag = this.onekLineChart.createPane('technicalIndicator', {technicalIndicatorType: 'VOL',height: 100})
			const oneData = () => {//实时更新
			  setTimeout(() => {
			    const oneList = this.onekLineChart.getDataList()
			    const lastone = oneList[oneList.length - 1]
			    const newone = generatedKLineDataList(lastone.timestamp, lastone.close, 1)[0]
			    newone.timestamp += 60 * 1000
			    this.onekLineChart.updateData(newone)
			    oneData(this.onekLineChart)
			  }, 10000)			
			}
			this.onekLineChart.applyNewData(generatedKLineDataList())// 为图表添加数据			
			oneData()
			// this.setconnectSocket()
		},
		methods: {		
			//日K
			// setCandleTechnicalIndicator: function(type) {
			// 	console.log(this.$kline)
			// 	// this.kLineChart.setTechnicalIndicatorType(type)
			// 	// this.$kline.setTechnicalIndicatorType(type)
			// },
			setCandleTechnicalIndicator(){
				console.log(this.$kline)
			},
			setSubTechnicalIndicator: function(type) {
				console.log(this.$kline)
				// this.kLineChart.setTechnicalIndicatorType(type, false, this.paneTag)
				// this.$kline.setTechnicalIndicatorType(type, false, this.paneTag)
			},
			// 60分
			sixsetCandleTechnicalIndicator: function(type) {
				this.sixkLineChart.setTechnicalIndicatorType(type)
			},
			sixsetSubTechnicalIndicator: function(type) {
				this.sixkLineChart.setTechnicalIndicatorType(type, false, this.sixpaneTag)
			},
			//30分
			theCandleTechnicalIndicator: function(type) {
				this.thekLineChart.setTechnicalIndicatorType(type)
			},
			theSubTechnicalIndicator: function(type) {
				this.thekLineChart.setTechnicalIndicatorType(type, false, this.thepaneTag)
			},
			//15分
			fiveCandleTechnicalIndicator: function(type) {
				this.fivekLineChart.setTechnicalIndicatorType(type)
			},
			fiveSubTechnicalIndicator: function(type) {
				this.fivekLineChart.setTechnicalIndicatorType(type, false, this.fivepaneTag)
			},
			// 1分
			oneCandleTechnicalIndicator: function(type) {
				this.onekLineChart.setTechnicalIndicatorType(type)
			},
			oneSubTechnicalIndicator: function(type) {
				this.onekLineChart.setTechnicalIndicatorType(type, false, this.onepaneTag)
			},
			//初始化websocket
			setconnectSocket(){
				console.log(this.$kline)
				getApp().globalData.connectSocket= uni.connectSocket({
				    url: 'ws://47.102.157.67:9652/ws/kline?symbol=CFFEX.IH2106&duration=1&id=12', //接口地址。
				    success: (res)=> {
						// res
					}
				});			
				uni.onSocketOpen(function (res) {
				  console.log('WebSocket连接已打开！');				  
				});
				uni.onSocketError(function (res) {
				  console.log('WebSocket连接打开失败，请检查！');
				});			
				this.getWebsocketMsg()
			},
			//接收websocket发送的消息
			getWebsocketMsg(){
				getApp().globalData.connectSocket.onOpen((res)=>{
					getApp().globalData.connectSocket.onMessage((req)=>{
						let arr=JSON.parse(req.data)
						 // this.Kdata.push(...arr);
						 // const updateData = () => {//实时更新
						 //   setTimeout(() => {
						 //     this.kLineChart.updateData(this.Kdata)
						 //     updateData(this.kLineChart)
						 //   }, 1000)
						 // }			 
						 this.$kline.applyNewData(arr)// 为图表添加数据
						 // updateData()
					})
				})
			},
			onclose(){
				getApp().globalData.connectSocket.close({
					success:(res=>{
						// res
					})
					
				})
			},
		},
		destroyed: function () {
		    dispose('technical-indicator-k-line')
		  }
	}
</script>
<style lang="scss" scoped>
	.content {
		height: 360px;
	}
	.k-line-chart1{
		height: 360px;
	}
	.k-line-chart-container {
		display: flex;
		flex-direction: column;
		margin: 15px;
		border-radius: 2px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
		/* background-color: #1f2126; */
		width: 100%;
		height: 400px;
		padding: 16px 6px 16px 16px;
		background-color: #fff;
	}
	
	.k-line-chart-title {
		margin: 0;
		color: #000;
		padding-bottom: 10px;
	}
	.k-line-chart-menu-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		font-size: 12px;
		color: #929AA5;
	}
	.k-line-chart-menu-container button {
		cursor: pointer;
		background-color: #2196F3;
		border-radius: 2px;
		margin-right: 8px;
		height: 24px;
		line-height: 26px;
		padding: 0 6px;
		font-size: 12px;
		color: #fff;
		border: none;
		outline: none;
	}
	page {
		background-color: #FFFFFF;
	}
	.flexd_cont{
		width: 100%;
		// background-color: #131623;
		color: #fff;
		font-size: 14px;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.rank_detail {
		height: 100vh;

		.top {
			padding-top: var(--status-bar-height);

			.nav_bar {
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;

				.nav_bar_left {
					width: 30%;
					color: #fff;
					display: flex;
					align-items: center;
				}

				.nav_bar_center {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					color: #fff;

					.rank_title {
						margin-left: 20rpx;

						.flag {
							width: 22rpx;
							height: 32rpx;
							border-radius: 3rpx;
							background-color: #faaf3c;
							font-size: 16rpx;
							text-align: center;
							color: #fff;
							line-height: 32rpx;
						}

						.name {
							font-size: 28rpx;
							color: #fff;
							margin-left: 5rpx;
						}
					}
				}

				.nav_bar_right {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #fff;
				}
			}

			.introduce {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				margin-top: 20rpx;
				padding-bottom: 0rpx;

				.intro_left {
					width: 300rpx;

					.price {
						font-size: 36rpx;
						color: #fff;
					}

					.ratio {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #fff;
					}

					.pay_time {
						height: 30rpx;
						width: 260rpx;
						line-height: 30rpx;
						background: rgba(255, 255, 255, .2);
						font-size: 24rpx;
						margin-top: 20rpx;
						display: flex;

						.tt {
							display: inline-block;
							background: #eee;
							width: 120rpx;
							text-align: center;
						}

						.arrow {
							display: inline-block;
							border: transparent 16rpx solid;
							height: 0;
							width: 0;
							right: 0rpx;
							border-left: #eee 15rpx solid;
						}
					}
				}

				.intro_right {
					width: 300rpx;
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 50%;
						justify-content: flex-start;

						.title {
							font-size: 24rpx;
							color: #ccc;
						}

						.price {
							font-size: 28rpx;
							color: #fff;
						}
					}
				}

			}

			.arrow_down {
				display: flex;
				justify-content: center;
				padding-bottom: 50rpx;
			}
		}

		.bottom {
			height: 1000rpx;
			position: relative;

			.k_line {
				height: 860rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.pop {
				width: 100%;
				position: absolute;
				top: 0;
				z-index: 100;
				height: 100%;
				background: rgba(0, 0, 0, 0.25);
				.info_tt {
					height: 60rpx;
					width: 100%;
					line-height: 60rpx;
					background: #fff;
					display: flex;
					font-size: 24rpx;

					.info_item {
						width: 20%;
						text-align: center;
					}

					.up {
						color: #CB1D14;
					}

					.down {
						color: #00B34F;
					}
				}

				.deep {
					background: #eee;
					font-size: 26rpx;
				}
			}
		}
	}

	.qiun-charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.qiun-Areacharts {
		width: 100%;
	}

	.charts {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.qiun-textarea {
		height: 300rpx;
	}
	.chart_position{
		position: relative;
		.charts_content {
			width: 100%;
			position: absolute;
			top: 0;
			// left: 0;
			background-color: #FFFFFF;
		}
		.charts_content1{
			width: 100%;
			position: absolute;
			top: 0;
			// left: -375px;
		}
		.charts_content2{
			width: 100%;
			position: absolute;
			top: 0;
			// left: -375px;
		}
		.charts_content3{
			width: 100%;
			position: absolute;
			top: 0;
		}
		.charts_content4{
			width: 100%;
			position: absolute;
			top: 0;
		}
		.charts_content5{
			width: 100%;
			position: absolute;
			top: 0;
		}
	}
	.titleClass {
		width: 100%;
		font-size: 6rpx;
		padding: 10rpx;
		background-color: #FFFFFF;
	}

	.wrap_view {
		width: 100%;
		height: 840rpx;

		.wrap_left {
			float: left;
			width: 70%;

			.wrap_top {
				width: 100%;
			}

			.wrap_bottom {
				width: 100%;
			}
		}

		.wrap-right {
			float: left;
			width: 30%;

			.scroll-view_H {
				height: 45vh;

			}

			.detail_class {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.detail_flex {
					flex: 1;
					text-align: center;
				}

				.active {
					color: #0EA391;
				}
			}

			.sp-r {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 12rpx;
				display: flex;
			}

			.sp-grid {
				flex: 1;
				justify-content: center;
				overflow: hidden;
				width: 200rpx;
				white-space: nowrap
			}

			.point_data {
				color: #19BE6B;
			}
		}
	}
</style>
